<template>
  <div style="padding: 10px;">
    <div class="flex shadow flex1">
      <p style="width: 5%;">模拟加压</p>
      <el-slider class="my-slider" v-model="sliderValue" @change="onSiderChange" :marks="marks" :min="-40" :max="90"
        :step="10" :format-tooltip="formatTooltip"></el-slider>
      <div class="val flex" style="padding-left: 2%;">
        <p>企业{{nums.packingNum}}家</p>
        <p>单量{{nums.tonnageNum}}单</p>
      </div>
      <el-button :type="buttonType" style="height: 30px;" @click="confirmPressurize">确定加压</el-button>
    </div>
    <el-tabs closable @tab-remove="tabRemove" style="margin-top: 15px;" v-model="activeName" type="border-card"
      @tab-click="handleClick" class="customTabs">
      <el-tab-pane :label="item.label" :name="index.toString()" v-for="(item,index) in tabs" :key="index">
        <div class="Left_slider">
          <div class="tab_list">
            <div class="tab_list_name" v-for="(item,index) in navList" :key="index"
              :class="{'active' : activeStep === index}" @click="scrollToSection(index)">
              <a style="font-size: 16px;">{{item}}</a>
            </div>
          </div>
          <div class="right-content">
            <div class="a right-sort">
              <div class="a-item flex" style="justify-content: space-between;">
                <p class="h2-title" style="margin-bottom: 15px">全生命周期图</p>
              </div>
              <div class="scroll-contianer flex shadow pos-re">
                <div class="scroll-item" v-for="(val, key) in item.ylcsPolicyBztRespList" :key="key">
                  <p class="name txt-center">流程{{key + 1}} : {{ val.nodeName }}</p>
                  <div class="lines flex">
                    <div class="left-line line-item" v-if="key !== 0"></div>
                    <div class="left-line" style="width: 108px" v-else></div>
                    <div class="center-round"></div>
                    <div class="right-line line-item" v-if="key !== item.ylcsPolicyBztRespList.length - 1"></div>
                    <div class="right-line" style="width: 108px" v-else></div>
                  </div>
                  <div class="bottom-percentage txt-center" style="padding-top: 30px;">
                    {{val.nodeFxjeValue}}万元
                  </div>
                </div>
                <span class="pos-ab pos-span">风险值:</span>
              </div>
            </div>
            <div class="a right-sort">
              <p class="h2-title" style="margin-bottom: 15px">风险值分布</p>
              <div class="flex" style="width: 100%;">
                <el-table border style="width: 50%;" max-height="300px" :data="item.tabList">
                  <el-table-column align="center" label="排名" width="50">
                    <template slot-scope="scope">
                      <span>{{scope.$index + 1}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="nodeName" align="center" label="流程节点">
                  </el-table-column>
                  <el-table-column align="center" label="风险值(金额)">
                    <template slot-scope="scope">
                      <span>{{ scope.row.nodeFxjeValue}}万元</span>
                    </template>
                  </el-table-column>
                </el-table>
                <div style="width: 50%;height: 300px;" :id="`pieEcharts${index}`" class="pieEcharts">

                </div>
              </div>
            </div>
            <div class="a right-sort">
              <p class="h2-title" style="margin-bottom: 15px">违规经济损失图(万元)</p>
              <div :id="'bar' + index" class="barContainer" style="width: 100%;height: 400px;"></div>
            </div>
            <div class="a right-sort">
              <p class="h2-title" style="margin-bottom: 15px">累计经济损失图(万元)</p>
              <div :id="'line' + index" class="lineContainer" style="width: 100%;height: 400px;"></div>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {
    formatDate,
    openMessage,
    deepClone
  } from '@/utils'
  export default {
    name: 'viewTask',
    data() {
      return {
        params: {}, //参数
        activeStep: 0,
        nodeDetailIndex: 0,
        sliderValue: 0,
        sliderValueList: [],
        buttonType:'info',
        marks: {
          '-40': '-40%',
          '-30': '-30%',
          '-20': '-20%',
          '-10': '-10%',
          0: '0%',
          10: '+10%',
          20: '+20%',
          30: '+30%',
          40: '+40%',
          50: '+50%',
          60: '+60%',
          70: '+70%',
          80: '+80%',
          90: '+90%',
        },
        navList: ['全生命周期图', '风险值分布', '违规经济损失图', '累计经济损失图'],
        nums: {}, //标准集装箱1和集散货的值
        activeName: '0',
        tabs: [],
        width: 0,
      }
    },
    methods: {
      scrollToSection(index) {
        this.activeStep = index;
        let content = document.querySelectorAll('.a')
        content[this.activeStep].scrollIntoView({
          behavior: "smooth",
          block: 'start',
          inline: 'start'
        })
      },
      convertToWan(num) {
        return (num / 10000).toFixed(2) // 除以10000得到万位单位的值
      },
      // 滑块滑动时
      onSiderChange(e) {
        this.sliderValue = e
        this.buttonType = e === 0 ? 'info' : 'primary'
        if (e !== 0) {
          if (this.sliderValueList.includes(e)) {
            let index = this.sliderValueList.indexOf(e)
            this.sliderValueList.splice(index, 1)
          } else {
            this.sliderValueList.push(e)
          }
        }
        if (e === 0) {
          this.nums.packingNum = this.params.packingNum
          this.nums.tonnageNum = this.params.tonnageNum
        } else {
          let val = e / 100
          this.nums.packingNum = this.params.packingNum + this.params.packingNum * val
          this.nums.tonnageNum = this.params.tonnageNum + this.params.tonnageNum * val
        }
      },
      formatTooltip(val) {
        return val < 0 ? `-${val}%` : `+${val}%`
      },
      handleClick(tab) {
        this.activeName = tab.name
        this.$nextTick(() => {
          let dom = document.getElementsByClassName('scroll-contianer')[0]
          let width = parseInt(dom.getBoundingClientRect().width)
          this.width = width
          this.initBar()
          this.initLine()
          this.initPie()
        })
      },
      tabRemove(targetName) {
        let tabs = this.tabs;
        let activeName = this.activeName;
        if (tabs[Number(targetName)].label === '默认') {
          openMessage("默认节点禁止删除", 'error')
          return
        }
        if (activeName === targetName) {
          tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.name;
              }
            }
          });
        }
        this.activeName = activeName;
        this.tabs = tabs.filter(tab => tab.name !== targetName);
        this.sliderValueList = this.sliderValueList.filter((item, index) => {
          return index !== Number(targetName)
        })
        this.confirmPressurize()
      },
      nodeClickDetail(index) {
        this.nodeDetailIndex = index
      },
      handScroll(e) {
        let content = document.querySelectorAll('.a')
        let num = Number(this.activeName)
        let someDom = Array.from(content).slice(num * 4, (num + 1) * 4)
        for (let i = 0; i < someDom.length; i++) {
          let sectionTop = someDom[i].getBoundingClientRect().top
          if (sectionTop >= 0) {
            this.activeStep = i
            break;
          }
        }
      },
      filterLabel(label) {
        let state = ''
        if (label == 0) {
          state = '默认'
        } else if (label > 0) {
          state = `+${label}%`
        } else if (label < 0) {
          state = `${label}%`
        }
        return state
      },
      // 确定加压
      confirmPressurize() {
        const loading = this.$loading({
          text: '加载中....',
          background: 'rgba(0,0,0,0.7)'
        })
        this.$request({
          url: 'hnzc/ylcs/policy/getPolicyDetail',
          method: 'post',
          data: {
            id: this.params.id,
            mnjyBfb: this.sliderValueList
          }
        }).then(({
          code,
          data
        }) => {
          let list = data
          list.forEach((item, index) => {
            let label = this.sliderValueList[index]
            item.name = index.toString()
            item.ylcsPolicyBztRespList.forEach((val, key) => {
              val.nodeFxjeValue = this.convertToWan(val.nodeFxjeValue)
            })
            item['label'] = this.filterLabel(label)
            let tempList = deepClone(item.ylcsPolicyBztRespList)
            item.tabList = tempList.sort((x, y) => {
              return y.nodeFxjeValue - x.nodeFxjeValue
            })
          })
          this.tabs = list
          if (this.tabs.length > 0) {
            this.$nextTick(() => {
              this.initBar()
              this.initLine()
              this.initPie()
            })
          }
          this.activeName = (this.sliderValueList.length - 1 ).toString()
          loading.close()
        })
      },
      initBar() {
        let i = Number(this.activeName)
        let dom = document.getElementsByClassName('barContainer')[i]
        let myChart = this.$echarts.init(dom);
        let options = {
          tooltip: {
            trigger: 'axis',
            axisPointer: { // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            },
            // formatter: function(params) {
            //   let dataIndex = params[0].dataIndex
            //   let data = params[0]
            //   return `${data.name},损失${data.value}万元`
            // }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [{
            type: 'category',
            data: this.tabs[i].nodeNmaes
          }],
          yAxis: [{
            type: 'value',
            // axisLabel: {
            //   formatter: '{value}万元' // 在每个标签上显示百分号
            // }
          }],
          series: [{
            data: this.tabs[i].ylcsPolicyBztRespList.map(item => item.nodeFxjeValue),
            barWidth: 40,
            type: 'bar'
          }]
        }
        myChart.setOption(options)
      },
      initLine() {
        let i = Number(this.activeName)
        let dom = document.getElementsByClassName('lineContainer')[i]
        let tempArr = deepClone(this.tabs[i].ylcsPolicyBztRespList)
        tempArr.sort((x,y) => {
          return x.nodeFxjeValue - y.nodeFxjeValue
        })
        let myChart = this.$echarts.init(dom);
        let option = {
          tooltip: {
            trigger: 'axis',
            // formatter: function(params) {
            //   let dataIndex = params[0].dataIndex
            //   let data = params[0]
            //   return `${data.name},累计经济损失${data.value}万元`
            // }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            data: tempArr.map(item => item.nodeName)
          },
          yAxis: {
            type: 'value',
            // axisLabel: {
            //   formatter: '{value}万元' // 在每个标签上显示百分号
            // }
          },
          series: [{
            type: 'line',
            stack: 'Total',
            data: tempArr.map(item => item.nodeFxjeValue)
          }]
        }
        myChart.setOption(option)
      },
      initPie() {
        let i = Number(this.activeName)
        let dom = document.getElementsByClassName('pieEcharts')[i]
        let myChart = this.$echarts.init(dom);
        let option = {
          tooltip: {
            trigger: 'item',
            formatter: function(params) {
              let dataIndex = params.dataIndex
              let data = params.data
              return `${data.name},损失${data.value}万元`
            }
          },
          legend: {
            left: 'center'
          },
          gird: {
            top: 5,
            left: 5,
            right: 5,
            bottom: 5,
          },
          series: [{
            type: 'pie',
            radius: '50%',
            data: this.tabs[i].ylcsPolicyBztRespList.map(item => {
              return {
                name: item.nodeName,
                value: item.nodeFxjeValue
              }
            }),
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }]
        }
        myChart.setOption(option)
      },
    },
    computed: {},
    beforeDestroy() {
      window.removeEventListener('scroll', this.handScroll)
    },
    mounted() {
      this.params = this.$route.query
      this.params.packingNum = Number(this.params.packingNum)
      this.params.tonnageNum = Number(this.params.tonnageNum)
      this.nums = deepClone({
        packingNum: this.params.packingNum, //装箱数
        tonnageNum: this.params.tonnageNum, //集散货
      })
      this.sliderValueList.push(this.sliderValue)
      this.confirmPressurize()
      window.addEventListener('scroll', this.handScroll, false)
    },
  }
</script>

<style lang="scss" scoped>
  .flex1 ::v-deep .el-button span {
    padding: 5px;
  }

  .customTabs ::v-deep .el-tabs__content {
    overflow: unset;
  }

  .pos-re {
    position: relative;

    .pos-span {
      position: absolute;
      left: 15px;
      bottom: 10px;
    }
  }

  .tabs-list {
    .tabs-item {
      cursor: pointer;
      margin-right: 30px;
      padding-bottom: 6px;
      transition: all .5s ease-in-out;

      &.active {
        color: rgb(233, 157, 66);
        border-bottom: 2px solid rgb(233, 157, 66);
      }
    }
  }

  .a {
    margin-top: 20px;
  }

  .txt-center {
    text-align: center;
  }

  .state-list {

    // padding-right: 50px;
    .state-item {
      margin-left: 36px;

      .round {
        display: inline-block;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        margin-right: 19px;
      }

      &:first-child .round {
        background-color: rgb(50, 65, 99);
      }

      &:nth-child(2) .round {
        background-color: rgb(233, 157, 66);
      }

      &:nth-child(3) .round {
        background-color: rgb(189, 49, 36);
      }
    }
  }

  .h2-title {
    padding-left: 15px;
    border-left: 2px solid rgb(59, 69, 93);
    font-weight: 700;
  }

  .button-div {
    width: 130px;
    height: 30px;
    border-radius: 4px;
    background-color: rgb(239, 239, 239);
    text-align: center;
    line-height: 30px;
    cursor: pointer;
    margin-bottom: 15px;

    &.active {
      background-color: rgb(50, 65, 99);
      color: #fff;
    }
  }

  * {
    margin: 0;
    padding: 0;
  }

  li {
    list-style: none;
  }

  .shadow {
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    border-radius: 4px;
  }

  .flex1 {
    justify-content: center;
    align-items: center;
    padding: 10px;
    padding-bottom: 20px;
  }

  .flex {
    display: flex;

    .my-slider {
      width: 60%;
      padding-left: 2%;
    }

    .val {
      width: 28%;

      p {
        padding-left: 3%;
      }
    }
  }

  p {
    margin: 0;
    padding: 0;
  }

  .tabContainer {
    .leftContinaer {
      width: 300px;
      position: sticky;
      top: 0px;
      height: 300px;
      z-index: 9999;
    }

    .rightContinaer {
      width: 80%;
    }
  }

  .scroll-contianer {
    border: 1px solid #f5f5f5;
    overflow-x: scroll;
    padding: 10px;

    &::-webkit-scrollbar {
      height: 12px;
      border-radius: 10px;
    }

    &::-webkit-scrollbar-track {
      border-radius: 5px;
    }

    .scroll-item {
      .flag {
        text-align: right;
        font-size: 12px;
        padding-right: 5px;
      }

      .name {
        padding-top: 15px;
        font-size: 18px;
        text-align: center;
      }

      .lines {
        padding-top: 30px;
        justify-content: space-between;
        align-items: center;

        .line-item {
          width: 104px;
          height: 2px;
          background-color: rgb(59, 69, 93);
        }

        .center-round {
          width: 10px;
          height: 10px;
          border-radius: 50%;
          background-color: rgb(59, 69, 93);
          margin: 0 2px;
        }
      }

      .bottom-list {
        font-size: 12px;

        .bottom-item {
          padding: 4px;
        }
      }
    }
  }

  .Left_slider {
    width: 100%;
    height: 100%;
    display: flex;

    .tab_list {
      width: 15%;
      height: 25%;
      // margin-top: 50px;
      border-right: 1px solid #e7ebf6;
      position: sticky;
      top: 0px;
      z-index: 999;

      .tab_list_name {
        width: 100%;
        font-family: Microsoft YaHei;
        font-weight: 300;
        margin: 63px 0 0 0;
        cursor: pointer;
        text-align: center;

        a {
          color: #7f878c;
        }
      }

      .active a {
        background: #e9f3ff;
        border-radius: 10px;
        font-size: 18px;
        // padding: 20px 30px;
        font-weight: bold;
        color: #0978df;
      }
    }
  }

  .right-content {
    .right_sort {
      margin-top: 50px;
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #1f2224;
    }

    width: 85%;
    height: 100%;
    margin: 0 1.875rem;
    overflow-y: auto;

    .sort_title {
      font-size: 24px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #1f2224;
      padding: 17px 0 20px 21px;
      margin-bottom: 21px;
      background: linear-gradient(90deg, #e9f2ff 0%, #ffffff 100%);
      border-radius: 8px;
    }

    .expound {
      .expoud_content {
        border: 1px solid #e7ebf6;
        border-radius: 4px;

        .expound_CN,
        .expound_UK {
          display: flex;

          .name {
            min-width: 160px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f1f3f7;
            font-size: 16px;
            font-weight: 400;
          }
        }
      }
    }

    .Support {
      .Support_list {
        margin-bottom: 20px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #0a40f2;

        .dian {
          margin-right: 10px;
        }
      }
    }

    .Conditions_content {
      span {
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #1f2224;
        line-height: 38px;
      }
    }

    .procedure_content {
      span {
        font-size: 16px;
      }
    }

    .procedure_Img_content {
      display: flex;

      .btn {
        margin-right: 17px;
        display: flex;
        font-size: 16px;
        width: 120px;
        height: 46px;
        justify-content: center;
        align-items: center;
        background: #e7f0fc;
        border-radius: 4px;
        border: none;
        cursor: pointer;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #1f2224;
      }
    }

    .interpret_content {
      margin-bottom: 20px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #0a40f2;

      .dian {
        margin-right: 10px;
      }
    }

    .case_content {
      margin-bottom: 20px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: 300;
      color: #0a40f2;

      .dian {
        margin-right: 10px;
      }
    }

    .department_content {
      display: flex;
      border: 1px solid #e7ebf6;
      border-radius: 4px;

      .dep {
        width: 50%;
      }

      .dep>div {
        display: flex;
        border-bottom: 1px solid #e7ebf6;
      }

      .dep1 {
        width: 20%;
        height: 50px;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        background: #f1f3f7;
        color: #1f2224;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .dep2 {
        width: 80%;
        font-size: 16px;
        font-family: Microsoft YaHei;
        font-weight: 300;
        color: #1f2224;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        span {
          display: inline-block;
          max-width: 100%;
          /* 设置最大宽度 */
          overflow: hidden;
          /* 超出部分隐藏 */
          text-overflow: ellipsis;
          /* 超出部分用省略号表示 */
          white-space: nowrap;
          /* 防止文字换行 */
          padding: 0 19px;
        }

        .InterWeb {
          cursor: pointer;
          color: #2d8cf0;
        }
      }
    }
  }
</style>
